<template>
  <div class="recommend-link" v-if="!getIsPhone">
    <div class="links">
      <recommend-card>
      </recommend-card>
      <recommend-card>
      </recommend-card>
      <recommend-card>
      </recommend-card>
      <recommend-card>
      </recommend-card>
      <recommend-card>
      </recommend-card>
    </div>
    
  </div>
  <div class="recommend-link" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div class="center-context">
          <span class="text" style="fontSize: 15px">
            推广链接
          </span>
        </div>
      </template>
      <template v-slot:right>
        <span class="icon" @click="addLink">
          <i class="iconfont icontg_tianjia"></i>
        </span>
      </template>
    </header-template-phone>
    <div class="main">
      <div class="wrapper box-shadow" v-for="item in linkData" :key="item.id">
        <recommend-card-phone :item="item"></recommend-card-phone>
      </div>
    </div>
  </div>
</template>
<script>
import RecommendCard from './components/recommend-card'
import RecommendCardPhone from './components/recommend-card-phone'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'


import { mapGetters } from 'vuex'
export default {
  components: {
    RecommendCard,
    HeaderTemplatePhone,
    HeaderBack,
    RecommendCardPhone
  },
  data() {
    return {
      linkData: [
        {
          id: 1,
          accountType: 'agent',
          title: '自定义名称',
          visited: 1208,
          registNo: 82
        },
        {
          id: 2,
          accountType: 'agent',
          title: '自定义名称',
          visited: 1208,
          registNo: 82
        },
        {
          id: 3,
          accountType: 'agent',
          title: '自定义名称',
          visited: 1208,
          registNo: 82
        },
        {
          id: 4,
          accountType: 'agent',
          title: '自定义名称',
          visited: 1208,
          registNo: 82
        },
        {
          id: 5,
          accountType: 'agent',
          title: '自定义名称',
          visited: 1298,
          registNo: 82
        },
      ]
    }
  },
  methods: {
    addLink() {
      this.$router.push({path: '/me/recommend-link/add'})
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone', 'getUserInfo']),
    
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px) 
    .links 
      display flex 
      flex-wrap wrap 
      justify-content space-between
      box-sizing border-box 
      padding 20px 20px 0 20px
  @media screen and (max-width 750px) 
    .main 
      box-sizing border-box 
      padding 0 10px
      padding-top 58px  
      .wrapper 
        background #fff
        border-radius 3px 
        border 1px solid $color-divide-line
        margin-bottom 10px
          
</style>